<template>
  <div class="bot">
    <el-icon>
      <Tickets />
    </el-icon>
    <span>数据列表</span>
    <el-row class="mb-4">
      <template #default="scope">
        <el-button type="primary" @click="add">添加</el-button>
      </template>
    </el-row>
  </div>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
    <el-table-column prop="name" label="分类名称" align="center"></el-table-column>
    <el-table-column prop="level" label="级别" width="110" align="center">
      <template #default="scope">
        {{ scope.row.level === 0 ? '一级' : '二级' }}
      </template>
    </el-table-column>
    <el-table-column prop="productCount" label="商品数量" width="110" align="center"></el-table-column>
    <el-table-column prop="productUnit" label="数量单位" width="110" align="center"></el-table-column>
    <el-table-column prop="navStatus" label="导航栏" width="110" align="center">
      <template #default="scope">
        <el-switch v-model="scope.row.navStatus" :active-value="1" :inactive-value="0"
          @change="changeHandle(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column prop="showStatus" label="是否显示" width="110" align="center">
      <template #default="scope">
        <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0"
          @change="changeHandle1(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="110" align="center"></el-table-column>
    <el-table-column label="设置" width="250" align="center">
      <template #default="scope">
        <el-button @click="toCheck(scope.row.id)">查看下级</el-button>
        <el-button>转移商品</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="操作" width="180" align="center">
      <template #default="scope">
        <el-button @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="fenye">
    <div class="demo-pagination-block">
      <!-- 如果只有某个组件需要汉化，这么包着就行 -->
      <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize"
          :page-sizes="[5, 10, 15]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </ElConfigProvider>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { user } from "@/api";
import { Search, Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs } from "vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import {
  ElMessage,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElIcon,
  ElRow,
  ElButton,
  ElTable,
  ElTableColumn,
  ElSwitch,
  ElConfigProvider,
  ElPagination,
  ElMessageBox,
} from "element-plus";

import { useRoute, useRouter } from "vue-router"

const router = useRouter()
const route = useRoute()
// 点击编辑

const edit = (id: number) => {

  router.push(`/pms/updateProductCate?id=${id}`)

}
// 点击添加
const add = () => {
  router.push(`/pms/addProductCate`)
}

// 查看下级
const toCheck = (id: number) => {
  router.push(`/pms/productCate?parentId=${id}`);
}
watch(() => route.query.parentId, () => {
  if (!route.query.parentId) return;
  state.listParams.parentId = route.query.parentId
  user.productCategoryApi(state.listParams).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data.list;
      state.total = res.data.total;
    }
  });
})

// 点击删除
const del = (id: number) => {
  ElMessageBox.confirm("是否要删除该品牌?", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: 'warning'
  })
    .then(() => {
      user.productCategoryDeleteApi(id)
      ElMessage({
        message: "删除成功",
        type: "success"
      })
      getList()
    })
    .catch(() => { })
}


interface IState {
  tableData: IUproductCategoty[];
  listParams: productCategotyList;
  total: number;
}
const state = reactive<IState>({
  tableData: [],
  listParams: {
    pageNum: 1,
    pageSize: 5,
    parentId: 0
  },
  total: 0,
});
// 请求数据
// user.productCategoryApi(state.listParams).then((res) => {
//   if (res.code === 200) {
//     state.tableData = res.data.list;
//     state.total = res.data.total;
//   }
// });

// 分页
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// 从新在请求一次
const getList = () => {
  user.productCategoryApi(state.listParams).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data.list;
      state.total = res.data.total;
    }
  });
}

// 点击页数
const handleSizeChange = (val: number) => {
  getList()
};
// 点击字数
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getList()
};

getList()

// 修改导航栏按钮的状态
const changeHandle = (row: IupdatenavStatus) => {
  user
    .updatenavStatusApi({
      ids: row.ids,
      navStatus: row.navStatus,
    })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      row.navStatus = row.navStatus === 1 ? 0 : 1;
    });
};
// 修改显示按钮的状态
const changeHandle1 = (row: IupdateshowStatus) => {
  user
    .updatenshowStatusApi({
      ids: row.ids,
      showStatus: row.showStatus,
    })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      row.showStatus = row.showStatus === 1 ? 0 : 1;
    });
};

let { tableData, listParams, total } = toRefs(state);
</script>
<style lang="less" scoped>
.box_breadcrumb {
  width: 100%;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.bot {
  // width: 1131px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0px 0px 10px 5px rgb(239, 237, 237);

  span {
    margin-left: 15px;
    font-size: 14px;
  }

  .el-row {
    float: right;
  }
}

.el-table {
  margin-top: 20px;
}

.fenye {
  margin-top: 20px;
  float: right;
}
</style>
  